<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px" @close="onCancel">
			<el-form ref="formRef" :model="state.ruleForm">
				<el-divider content-position="left">售后记录</el-divider>
				<OrderAfterRecords ref="orderAfterRecordsRef" />
				<el-divider content-position="left">申请信息</el-divider>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="商品名称" prop="goods_title">
							<el-input v-model="state.ruleForm.goods_title" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="购买数量" prop="total_num">
							<el-input v-model="state.ruleForm.total_num" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="商品售价" prop="sale_price">
							<el-input v-model="state.ruleForm.sale_price" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="商品总售价" prop="total_amt">
							<el-input v-model="state.ruleForm.total_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="供货单价" prop="cost_price">
							<el-input v-model="state.ruleForm.cost_price" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="供货总价" prop="supplier_amt">
							<el-input v-model="state.ruleForm.supplier_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="运费" prop="trans_amt">
							<el-input v-model="state.ruleForm.trans_amt" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="支付金额(含运费)" prop="pay_amt">
							<el-input v-model="state.ruleForm.pay_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">审核处理</el-divider>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="审核结果" prop="after_status">
							<el-select v-model="state.ruleForm.after_status">
								<el-option label="审核同意退全款" :value="1" />
								<el-option label="审核同意退部分款" :value="2" />
								<el-option label="审核拒绝" :value="3" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col v-if="state.ruleForm.after_status === 1" :span="12">
						<el-form-item label="退款金额" prop="pay_amt">
							<el-input v-model="state.ruleForm.pay_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<template v-if="state.ruleForm.after_status === 2">
					<el-row class="mb20" :gutter="20">
						<el-col :span="12">
							<el-form-item label="供应商金额" prop="supplier_amt">
								<el-input v-model="state.ruleForm.supplier_amt" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="扣除供应商金额" prop="refund_info.supplier_amt">
								<el-input v-model="state.ruleForm.refund_info.supplier_amt" @input="onVerifiyNumberIntegerSupplierAmt" placeholder="请输入扣除金额" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="mb20" :gutter="20">
						<el-col :span="12">
							<el-form-item label="平台服务费" prop="service_amt">
								<el-input v-model="state.ruleForm.service_amt" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="扣除平台服务费" prop="refund_info.service_amt">
								<el-input v-model="state.ruleForm.refund_info.service_amt" @input="onVerifiyNumberIntegerServiceAmt" placeholder="请输入扣除金额" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="mb20" :gutter="20">
						<el-col :span="12">
							<el-form-item label="铜牌佣金" prop="agent_amt1">
								<el-input v-model="state.ruleForm.agent_amt1" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="扣除铜牌佣金" prop="refund_info.agent_amt1">
								<el-input v-model="state.ruleForm.refund_info.agent_amt1" @input="onVerifiyNumberIntegerAgentAmt1" placeholder="请输入扣除金额" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="mb20" :gutter="20">
						<el-col :span="12">
							<el-form-item label="银牌佣金" prop="agent_amt2">
								<el-input v-model="state.ruleForm.agent_amt2" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="扣除银牌佣金" prop="refund_info.agent_amt2">
								<el-input v-model="state.ruleForm.refund_info.agent_amt2" @input="onVerifiyNumberIntegerAgentAmt2" placeholder="请输入扣除金额" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="mb20" :gutter="20">
						<el-col :span="12">
							<el-form-item label="金牌佣金" prop="agent_amt3">
								<el-input v-model="state.ruleForm.agent_amt3" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="扣除金牌佣金" prop="refund_info.agent_amt3">
								<el-input v-model="state.ruleForm.refund_info.agent_amt3" @input="onVerifiyNumberIntegerAgentAmt3" placeholder="请输入扣除金额" />
							</el-form-item>
						</el-col>
					</el-row>
				</template>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="审核说明">
							<template #label>
								{{ state.ruleForm.after_status === 3 ? '拒绝原因' : '审核说明' }}
							</template>
							<el-input v-model="state.ruleForm.content" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">审 核</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { defineAsyncComponent, reactive, ref } from 'vue';
import { orderApi } from '/@/api';
import { verifiyNumberInteger } from '/@/utils/toolsValidate';
import { floatAdd } from '/@/utils/dictionary';

const OrderAfterRecords = defineAsyncComponent(() => import('../orderAfterRecords.vue'));

let callback: Function = () => {};
const OrderApi = orderApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		order_after_id: '',
		after_type: '',
		goods_title: '',
		total_num: '',
		sale_price: '',
		total_amt: '',
		cost_price: '',
		supplier_amt: '',
		service_amt: '',
		agent_amt1: '',
		agent_amt2: '',
		agent_amt3: '',
		trans_amt: '',
		pay_amt: '',
		after_status: 1,
		content: '',
		refund_info: {
			supplier_amt: '',
			service_amt: '',
			agent_amt1: '',
			agent_amt2: '',
			agent_amt3: '',
		},
	},
});
const formRef = ref();
const orderAfterRecordsRef = ref();

/********** 触发事件 **********/
// 扣除供应商金额过滤
const onVerifiyNumberIntegerSupplierAmt = (val: string) => {
	state.ruleForm.refund_info.supplier_amt = verifiyNumberInteger(val);
};
// 扣除平台服务费过滤
const onVerifiyNumberIntegerServiceAmt = (val: string) => {
	state.ruleForm.refund_info.service_amt = verifiyNumberInteger(val);
};
// 扣除铜牌佣金过滤
const onVerifiyNumberIntegerAgentAmt1 = (val: string) => {
	state.ruleForm.refund_info.agent_amt1 = verifiyNumberInteger(val);
};
// 扣除银牌佣金过滤
const onVerifiyNumberIntegerAgentAmt2 = (val: string) => {
	state.ruleForm.refund_info.agent_amt2 = verifiyNumberInteger(val);
};
// 扣除金牌佣金过滤
const onVerifiyNumberIntegerAgentAmt3 = (val: string) => {
	state.ruleForm.refund_info.agent_amt3 = verifiyNumberInteger(val);
};
// 取消
const onCancel = () => {
	orderAfterRecordsRef.value.onCancel();
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		const ruleForm = state.ruleForm;
		if (ruleForm.after_status === 3) {
			if (!ruleForm.content) return ElMessage.warning('请输入拒绝原因');
			state.dialog.submitLoading = true;
			if (Number(state.ruleForm.after_type) === 1) {
				_orderAfterOneCheck({
					order_after_id: ruleForm.order_after_id,
					one_after_status: 1,
					refund_type: 3,
					one_confuse_reason: ruleForm.content,
				});
			} else {
				_orderAfterTwoCheck({
					order_after_id: ruleForm.order_after_id,
					two_after_status: 1,
					refund_type: 3,
					two_confuse_reason: ruleForm.content,
				});
			}
		} else {
			let refund_info = {
				refund_amt: Number(ruleForm.pay_amt),
				supplier_amt: ruleForm.after_status === 1 ? Number(state.ruleForm.agent_amt3) : Number(state.ruleForm.refund_info.supplier_amt),
				service_amt: ruleForm.after_status === 1 ? Number(state.ruleForm.service_amt) : Number(state.ruleForm.refund_info.service_amt),
				agent_amt1: ruleForm.after_status === 1 ? Number(state.ruleForm.agent_amt1) : Number(state.ruleForm.refund_info.agent_amt1),
				agent_amt2: ruleForm.after_status === 1 ? Number(state.ruleForm.agent_amt2) : Number(state.ruleForm.refund_info.agent_amt2),
				agent_amt3: ruleForm.after_status === 1 ? Number(state.ruleForm.agent_amt3) : Number(state.ruleForm.refund_info.agent_amt3),
			};
			if (ruleForm.after_status === 2) {
				const refund_amt1 = floatAdd(Number(refund_info.supplier_amt), Number(refund_info.service_amt));
				const refund_amt2 = floatAdd(Number(refund_info.agent_amt1), Number(refund_info.agent_amt2));
				const refund_amt3 = floatAdd(Number(refund_amt1), Number(refund_amt2));
				const refund_amt = floatAdd(Number(refund_amt3), Number(refund_info.agent_amt3));
				if (Number(refund_info.supplier_amt) > Number(ruleForm.supplier_amt))
					return ElMessage.warning('「扣除平台供应商金额」不能大于「供应商金额」');
				if (Number(refund_info.service_amt) > Number(ruleForm.service_amt)) return ElMessage.warning('「扣除平台服务费」不能大于「平台服务费」');
				if (Number(refund_info.agent_amt1) > Number(ruleForm.agent_amt1)) return ElMessage.warning('「扣除铜牌佣金」不能大于「铜牌佣金」');
				if (Number(refund_info.agent_amt2) > Number(ruleForm.agent_amt2)) return ElMessage.warning('「扣除银牌佣金」不能大于「银牌佣金」');
				if (Number(refund_info.agent_amt3) > Number(ruleForm.agent_amt3)) return ElMessage.warning('「扣除金牌佣金」不能大于「金牌佣金」');
				if (!Number(refund_amt)) return ElMessage.warning('退部分款金额之和必须大于0');
				refund_info.refund_amt = refund_amt;
			}
			state.dialog.submitLoading = true;
			if (Number(state.ruleForm.after_type) === 1) {
				_orderAfterOneCheck({
					...ruleForm,
					one_after_status: 2,
					one_remark: ruleForm.content,
					refund_type: ruleForm.after_status,
					refund_info: JSON.stringify(refund_info),
				});
			} else {
				_orderAfterTwoCheck({
					...ruleForm,
					two_after_status: 2,
					two_remark: ruleForm.content,
					refund_type: ruleForm.after_status,
					refund_info: JSON.stringify(refund_info),
				});
			}
		}
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any, fn: Function) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `「${row.order_after_no}」售后审核`;
	callback = fn;
	state.ruleForm = {
		order_after_id: row.id,
		after_type: row.after_type,
		goods_title: row.goods_title,
		total_num: row.order_detail_info.total_num,
		sale_price: row.order_detail_info.sale_price,
		total_amt: row.order_detail_info.total_amt,
		cost_price: row.order_detail_info.cost_price,
		supplier_amt: String(floatAdd(row.order_detail_info.supplier_amt,row.order_detail_info.trans_amt)),
		service_amt: row.order_detail_info.service_amt,
		agent_amt1: row.order_detail_info.agent_amt1,
		agent_amt2: row.order_detail_info.agent_amt2,
		agent_amt3: row.order_detail_info.agent_amt3,
		trans_amt: Number(row.order_detail_info.trans_amt) ? row.order_detail_info.trans_amt : '包邮',
		pay_amt: row.order_detail_info.pay_amt,
		after_status: 1,
		content: '',
		refund_info: {
			supplier_amt: '',
			service_amt: '',
			agent_amt1: '',
			agent_amt2: '',
			agent_amt3: '',
		},
	};
	setTimeout(() => {
		orderAfterRecordsRef.value.openDialog(row);
	}, 1000);
};

/********** 网络请求 **********/
// 售后一审
const _orderAfterOneCheck = (params: Object) => {
	OrderApi.orderAfterOneCheck(params)
		.then(() => {
			ElMessage.success('操作成功');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};
// 售后二审
const _orderAfterTwoCheck = (params: Object) => {
	OrderApi.orderAfterTwoCheck(params)
		.then(() => {
			ElMessage.success('操作成功');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
